<template>
  <div class="lunbotu">
    <div class="block">
      <el-carousel height="260px">
        <el-carousel-item
          v-for="(item, index) in img1"
          :data-cookid="cookid[index]"
        >
          <h3 class="small">
            <div class="title">{{ title[index] }}</div>
            <img :src="item" alt="" @click="myselect" />
            <div class="username">by {{ username[index] }}</div>
          </h3>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      img1: [],
      cookid: [],
      title: [],
      username: [],
    };
  },
  async mounted() {
    var img1 = [];
    var cookid = [];
    var title = [];
    var username = [];
    this.$axios("/zztz/popular2").then((res) => {
      // console.log(res.data);
      res.data.map((el) => {
        img1.push(el.img);
        cookid.push(el.cookid);
        title.push(el.title);
        username.push(el.username);
      });
      this.img1 = img1;
      this.cookid = cookid;
      this.title = title;
      this.username = username;
    });
  },
  methods: {
    myselect(e) {
      this.$router.push({
        path: `/menudetail/${e.target.parentNode.parentNode.dataset.cookid}`,
      });
    },
  },
};
</script>

<style scoped="scoped">
.lunbotu {
  width: 492px;
  height: 260px;
  position: absolute;
  left: 155px;
  top: 0;
  cursor: pointer;
}
.el-carousel__item h3 {
  font-size: 14px;
  line-height: 150px;
  margin: 0;
}
img {
  width: 490px;
  height: 280px;
  filter: brightness(80%);
}
.title {
  width: 400px;
  /* height: 32px; */
  line-height: 32px;
  position: absolute;
  font-size: 30px;
  color: #fff;
  text-shadow: 0 0 2px rgb(0 0 0 / 20%);
  font-weight: 700;
  z-index: 99;
  bottom: 59px;
  left: 30px;
  /* text-overflow: ellipsis; */
  /* white-space: nowrap; */
  /* overflow: hidden; */
}
.username{
  height: 20px;
  line-height: 20px;
  font-size: 13px;
  color: #fff;
  position: absolute;
  bottom: 31px;
  left: 30px;
}
</style>